<script setup>
import { ref, computed, onMounted } from 'vue'
import {
    DocumentCopy,
    Refresh
} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { parseNetworkInfo } from '@/share/constants'

// 响应式数据
const networkInfo = ref(null)
const source = ref('')

// 计算属性
const fullAddress = computed(() =>
    networkInfo.value ? `${networkInfo.value.ip}:${networkInfo.value.clientPort}` : ''
)


// 方法：复制地址
const copyAddress = async () => {
    if (!fullAddress.value) return
    try {
        await navigator.clipboard.writeText(fullAddress.value)
        ElMessage.success('地址已复制')
    } catch {
        ElMessage.error('复制失败')
    }
}

// 方法：刷新信息
const refreshInfo = async () => {
    localStorage.removeItem('network_info')
    networkInfo.value = null
    source.value = ''
    
    const network_info = await parseNetworkInfo()
    networkInfo.value = network_info.networkInfo;
    source.value = network_info.source
}

// 初始化加载
onMounted(async () => {
    const network_info = await parseNetworkInfo()
    console.log('network_info ::', network_info);

    networkInfo.value = network_info.networkInfo;
    source.value = network_info.source
})
</script>

<template>
    <div class="container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>服务器连接信息</span>
                    <el-tag v-if="source" size="small">{{ source }}</el-tag>
                </div>
            </template>

            <el-descriptions border :column=1>
                <el-descriptions-item label="IP地址">
                    {{ networkInfo?.ip || '未知' }}
                </el-descriptions-item>
                <el-descriptions-item label="客户端PORT">
                    {{ networkInfo?.clientPort || '未知' }}
                </el-descriptions-item>
                <el-descriptions-item label="服务端PORT">
                    {{ networkInfo?.serverPort || '未知' }}
                </el-descriptions-item>
                <el-descriptions-item label="完整地址">
                    <el-text type="primary" tag="b">
                        {{ fullAddress || '无法获取地址' }}
                    </el-text>
                </el-descriptions-item>
            </el-descriptions>
        </el-card>

        <div class="actions">
            <el-button type="primary" :disabled="!fullAddress" @click="copyAddress">
                <el-icon>
                    <DocumentCopy />
                </el-icon>
                复制地址
            </el-button>

            <el-button @click="refreshInfo">
                <el-icon>
                    <Refresh />
                </el-icon>
                刷新信息
            </el-button>
        </div>
    </div>
</template>

<style scoped>
.container {
    max-width: 600px;
    margin: 20px auto;
    padding: 0 16px;
}

.box-card {
    margin-bottom: 16px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
</style>